<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common::header">
    <meta charset="UTF-8"/>
    <title>Title</title>
</head>
<body>
<div th:include="common::navbar"></div>
<div class="layui-container" style="margin-top: 30px;">

    <div id="main" class="layui-fluid" style="height:400px;"></div>
</div>
<div th:include="common::footers"></div>
<script th:src="@{/layui/echart.js}" src="/layui/echart.js"></script>
<script th:inline="javascript">
    autoScreen();

    $.ajax({
        url:'/stockIncrease',
        method:'get',
        data:{},
        dataType:'JSON',
        success:function(da){
            f(da,'main',"前30 天涨幅超过5% 的次数");

        },
        error:function (data) {

        }
    });


    function f(data,elem,title){
        var sharesName=data["ids"];
        var counts=data["counts"];

        var myChart = echarts.init(document.getElementById(elem));
        option = {
            title: {
                text: title
            },
            legend: {
                data: ['次数'],
                align: 'left'
            },
            toolbox: {
                // y: 'bottom',
                feature: {
                    magicType: {
                        type: ['stack', 'tiled']
                    },
                    dataView: {},
                    saveAsImage: {
                        pixelRatio: 2
                    }
                }
            },
            tooltip: {},
            xAxis: {
                data: sharesName,
                silent: false,
                splitLine: {
                    show: false
                }
            },
            yAxis: {
            },
            series: [{
                name: '次数',
                type: 'bar',
                data: counts,
                animationDelay: function (idx) {
                    return idx * 10;
                }
            }],
            animationEasing: 'elasticOut',
            animationDelayUpdate: function (idx) {
                return idx * 5;
            }
        };
        myChart.setOption(option);
    }

    </script>
</body>
</html>